[#assign title]订单详情[/#assign]
[#include "/common/_layout.html"/]
[#macro style]
<style>
</style>
[/#macro]
[#macro body]
<div class="row">
    <div class="col-12">
        <mt-cell title="订单编号">{{order.sn}}</mt-cell>
        <mt-cell title="订单状态">
            <span class="text-danger" v-if="order.expire && new Date(order.expire) < new Date()">(已过期)</span>
            {{order.status | orderStatusFilter}}
        </mt-cell>
        <mt-cell title="过期时间" v-if="order.status == 'PENDING_PAYMENT'">{{order.expire | formatDate}}</mt-cell>
        <mt-cell title="实际支付">
            <span class="text-danger">￥{{order.paymentAmount}}</span>
        </mt-cell>
        <div class="row">
            <div class="col-12">
                <div class="col-12">
                    <mt-cell title="订单金额">￥{{order.price}}</mt-cell>
                </div>
            </div>
        </div>
        <mt-cell title="获得金豆">
            <span class="text-danger">{{order.receiveAmount + order.exchangeAmount}}</span>
        </mt-cell>
        <div class="row">
            <div class="col-12">
                <div class="col-12">
                    <mt-cell title="充值金豆">{{order.receiveAmount}}</mt-cell>
                    <mt-cell title="赠送金豆">{{order.exchangeAmount}}</mt-cell>
                </div>
            </div>
        </div>
    </div>
</div>
[#-- 订单未支付,且未过期,可取消订单或继续支付 --]
<template v-if="order.status == 'PENDING_PAYMENT' && !(order.expire && new Date(order.expire) < new Date())">
    <mt-cell></mt-cell>
    <div class="row">
        <div :class="paymentTransaction ? 'col-6' : 'col-12'">
            <button type="button" class="btn btn-default btn-block" @click="cancel">取消订单</button>
        </div>
        <div class="col-6" v-if="paymentTransaction">
            <button type="button" class="btn btn-primary btn-block" @click="pay">继续支付</button>
            <form hidden action="/payment/submit" method="post">
                <input name="CSRF_TOKEN" value="${CSRF_TOKEN}"/>
                <input name="orderSn" :value="order.sn"/>
                <input name="type" :value="paymentTransaction.type"/>
                <input name="paymentPluginId" :value="paymentTransaction.paymentPluginId"/>
            </form>
        </div>
    </div>
</template>
[/#macro]
[#macro script]
<script>
    var app = new Vue({
        el: '#app',
        data: {
            orderSn: '${orderSn}',
            orderStatusMapping: {},
            order: {
                sn: '',
                status: '',
                price: 0,
                paymentAmount: 0,
                receiveAmount: 0,
                exchangeAmount: 0
            },
            paymentTransaction: {}
        },
        methods: {
            refresh: function () {
                var vm = this;
                axios.post('/order/recharge/detail', {sn: vm.orderSn}).then(function (response) {
                    var data = response.data;
                    if (!data.success) {
                        return vm.$toast(data.message || '订单信息加载失败,请稍候重试');
                    }
                    vm.order = data.data.order;
                    vm.paymentTransaction = data.data.paymentTransaction;
                });
            },
            /** 支付订单 */
            pay: function () {
                var vm = this;
                vm.$indicator.open({
                    text: '处理中...',
                    spinnerType: 'fading-circle'
                });
                document.querySelector('form').submit();
            },
            /** 取消订单 */
            cancel: function () {
                var vm = this;
                vm.$messagebox({
                    title: '提示',
                    message: '订单取消后不能恢复,是否继续',
                    cancelButtonText: '继续取消',
                    confirmButtonText: '再考虑下',
                    showCancelButton: true
                }).then(function (value) {
                    if ('confirm' == value) {
                        return;
                    }
                    vm.$indicator.open({
                        text: '处理中...',
                        spinnerType: 'fading-circle'
                    });
                    axios.post('/order/recharge/cancel', {sn: vm.orderSn}).then(function (response) {
                        vm.$indicator.close();
                        var data = response.data;
                        if (!data.success) {
                            return vm.$toast(data.message || '取消失败,请稍候重试');
                        }
                        vm.$toast('订单已取消');
                    }).catch(function (err) {
                        vm.$indicator.close();
                    });
                });
            }
        },
        computed: {},
        filters: {
            orderStatusFilter: function (status) {
                if (!status || !app) {
                    return;
                }
                return app.orderStatusMapping[status];
            }
        },
        mounted: function () {
            var vm = this;
            vm.refresh();
            axios.post('/order/recharge/status').then(function (response) {
                vm.orderStatusMapping = response.data;
            });
        }
    });
</script>
[/#macro]